<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-card>
          <h1 style="color: orange;text-align: center">{{ c.title }}</h1>
          <p style="color: #666;font-size: 12px;text-align: center">
            作者:{{ c.nickname }} | 发布时间:{{ c.createTime }} | 阅读次数:{{ c.viewCount }}
          </p>
          <hr>
<!--       视频   -->
          <div v-if="c.type==2">
            <video style="width: 100%" :src="BASE_URL+c.videoUrl"
            controls type="video/mp4"></video>
          </div>
          <div v-else><!--  食谱和资讯   -->
            <el-card style="font-size:12px;color:#666">
              <span style="font-weight: bold;color: #0aa1ed">摘要:</span>
              {{ c.brief }}
            </el-card>
            <p v-html="c.content"></p>
          </div>

        </el-card>
        <!--评论相关开始-->
        <el-card style="margin-top: 20px">
          <p>发一条友善的评论</p>
          <hr>
          <el-row :gutter="10">
            <el-col :span="22">
              <el-input v-model="comment.content" placeholder="说点儿啥..."></el-input>
            </el-col>
            <el-col :span="2">
              <el-button @click="post()">发布</el-button>
            </el-col>
          </el-row>
          <!--    列表开始     -->
          <el-row :gutter="10" v-for="item in commentArr">
            <el-col :span="2">
              <el-avatar style="margin-top:5px" :src="BASE_URL+item.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="22">
              <p style="color: orange;font-weight: bold;margin: 5px">{{item.nickname}}</p>
              <p style="margin:0">{{item.content}}</p>
              <p style="font-size: 12px;color: #666;margin:0px">{{item.createTime}}</p>
            </el-col>
          </el-row>
          <!--    列表结束     -->
        </el-card>
        <!--评论相关结束-->

      </el-col>
      <el-col :span="6">
        <el-card>
          <div id="head_div"></div>
          <div style="text-align: center;position: relative;bottom: 45px">
            <el-avatar :src="BASE_URL+c.userImgUrl" :size="90" style="border: 5px solid white"></el-avatar>
            <p style="font-size: 20px;font-weight: bold;margin: 0">{{ c.nickname }}</p>
            <el-icon>
              <Edit/>
            </el-icon>
            本文作者<br>
            <el-icon>
              <Clock/>
            </el-icon>
            {{ c.createTime }}
          </div>
        </el-card>
        <!--   作者其它文章开始    -->
        <el-card style="margin-top: 20px">
          <h2>作者其它文章</h2>
          <hr>
          <el-row :gutter="10" v-for="item in userArr">
            <el-col :span="10">
              <!--       javascript:void(0)废掉超链接的跳转功能     -->
              <a href="javascript:void(0)" @click="detail(item.id)">
                <img :src="BASE_URL+item.imgUrl" style="width: 100%">
              </a>
            </el-col>
            <el-col :span="14">
              <a style="text-decoration: none;color: black" href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p">{{ item.title }}</p>
              </a>
              <p style="font-size: 12px;color: #666">{{ item.createTime }}</p>
            </el-col>
          </el-row>
        </el-card>
        <!--   作者其它文章结束    -->
        <!--   热门文章开始    -->
        <el-card style="margin-top: 20px">
          <h2>热门文章</h2>
          <hr>
          <el-row :gutter="10" v-for="item in hotArr">
            <el-col :span="10">
              <a href="javascript:void(0)" @click="detail(item.id)">
                <img :src="BASE_URL+item.imgUrl" style="width: 100%">
              </a>
            </el-col>
            <el-col :span="14">
              <a style="text-decoration: none;color: black"
                 href="javascript:void(0)" @click="detail(item.id)">
                <p class="title_p">{{ item.title }}</p>
              </a>
              <p style="font-size: 12px;color: #666">{{ item.createTime }}</p>
            </el-col>
          </el-row>
        </el-card>
        <!--   热门文章结束    -->

      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import router from "@/router";
import qs from "qs";
import {ElMessage} from "element-plus";

const commentArr = ref([]);
const loadComments = ()=>{
  //发请求获取评论列表
  axios.get(BASE_URL+'/v1/comments/'+c.value.id).then((response)=>{
    if (response.data.code==2001){
      commentArr.value = response.data.data;
    }
  })
}

const comment = ref({content:""});
const post = ()=>{
  let user = getUser();
  if (user==null){
    alert("请先登录!");router.push('/login');return;
  }
  //UserID 文章id  评论内容
  comment.value.userId = user.id;
  comment.value.contentId = c.value.id;
  let data = qs.stringify(comment.value);
  axios.post(BASE_URL+'/v1/comments/add-new',data).then((response)=>{
    if (response.data.code==2001){
      ElMessage.success("评论完成!");
      comment.value.content = '';
      //查询评论列表
      loadComments();
    }
  })

}

const userArr = ref([]);
const hotArr = ref([]);

const c = ref({});

const detail = (id) => {
  //修改地址栏中的内容
  router.push('/detail?id='+id);

  //通过id查询详情
  axios.get(BASE_URL + '/v1/contents/' + id + '/detail').then((response) => {
    if (response.data.code == 2001) {
      c.value = response.data.data;

      loadComments();//加载评论

      //通过作者id请求相关文章
      axios.get(BASE_URL + '/v1/contents/' + c.value.userId + '/user')
          .then((response) => {
            if (response.data.code == 2001) {
              userArr.value = response.data.data;
            }
          })

    }
  })
}

onMounted(() => {

  //得到地址栏中的id
  let id = new URLSearchParams(location.search).get('id');
  detail(id);//通过id查询详情

  //请求热门文章
  axios.get(BASE_URL + '/v1/contents/hot').then((response) => {
    if (response.data.code == 2001) {
      hotArr.value = response.data.data;
    }
  })

})
</script>

<style scoped>
.title_p {
  height: 40px;
  margin: 0;
  overflow: hidden; /*超出部分不显示*/
  /*如果内容超出范围则以省略号展示*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置行数*/
  -webkit-box-orient: vertical;
}

#head_div {
  background-image: url('/public/imgs/avarbg.jpg');
  height: 90px;
}
</style>